<template>
  <el-dialog
    :append-to-body="true"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="globalData.title"
    :visible.sync="isDialog.visible"
    top="5vh"
    width="1050px"
  >
    <div class="header-box"></div>

    <div class="flex-content">
      <el-form label-position="right" label-width="auto">
        <el-form-item label="封面图">
          <el-image
            v-if="dataInfo.picture_path"
            :src="dataInfo.picture_path"
            class="image-box"
          >
            <div slot="error" class="image-slot">
              <img alt="没有图片" src="@/assets/imgs/error-img.png" />
            </div>
          </el-image>
        </el-form-item>

        <el-form-item label="名称">
          <el-input v-model="dataInfo.name" disabled type="text"></el-input>
        </el-form-item>

        <el-form-item label="分类">
          <el-input
            v-model="dataInfo.cate_id.name"
            disabled
            type="text"
          ></el-input>
        </el-form-item>

        <div class="gird3">
          <el-form-item label="市场价">
            <el-input
              v-model="dataInfo.market_price"
              disabled
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="赠送积分">
            <el-input v-model="dataInfo.score" disabled type="text"></el-input>
          </el-form-item>
          <el-form-item label="运费">
            <el-input
              v-model="dataInfo.freight"
              disabled
              type="text"
            ></el-input>
          </el-form-item>
        </div>

        <div class="gird3">
          <el-form-item label="累计销量">
            <el-input
              v-model="dataInfo.sales_volume"
              disabled
              type="text"
            ></el-input>
          </el-form-item>
          <el-form-item label="累计单量">
            <el-input
              v-model="dataInfo.order_num"
              disabled
              type="text"
            ></el-input>
          </el-form-item>

          <el-form-item label="累计成交金额">
            <el-input
              v-model="dataInfo.order_fee"
              disabled
              type="text"
            ></el-input>
          </el-form-item>
        </div>

        <el-form-item label="相册">
          <div class="item-box">
            <div
              v-for="(item, index) in dataInfo.picture_collection"
              :key="index"
            >
              <el-image
                v-if="item.picturePath"
                :src="item.picturePath"
                class="image-box"
              >
                <div slot="error" class="image-slot">
                  <img alt="没有图片" src="@/assets/imgs/error-img.png" />
                </div>
              </el-image>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="规格">
          <div
            v-for="(item, index) in dataInfo.spec_collection"
            :key="index"
            class="gird2"
          >
            <div class="specItem">
              <div class="name">规格名称</div>
              <el-input v-model="item.name" disabled type="text"></el-input>
            </div>
            <div class="specItem">
              <div class="name">规格价格</div>
              <el-input v-model="item.price" disabled type="text"></el-input>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="图文详情">
          <div class="content" v-html="dataInfo.content"></div>
        </el-form-item>
        <!--        -->
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import { info } from "@/api/goods";

export default {
  name: "Goods",
  props: {
    info: {
      type: Object,
    },
  },
  data() {
    return {
      // 详情
      dataInfo: {},
      // 数据
      globalData: {
        title: "",
      },
      // 加载
      isLoading: {
        table: false,
      },
      // 弹窗
      isDialog: {
        visible: true,
      },
    };
  },
  created() {
    this.globalData.title = "商品详情" + "(" + this.info.name + ")";
    this.getData();
  },
  methods: {
    // 数据
    getData() {
      info({
        goods_id: this.info.goods_id,
      }).then((res) => {
        this.dataInfo = res.data.info;
      });
    },
    // 关闭
    handleClose() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.el-table {
  min-height: 60vh;
}

::v-deep .el-dialog__body {
  padding: 20px 20px;
}

.header-box {
  display: flex;

  > div {
    margin-right: 10px;
  }
}

.flex-content {
  margin-top: 10px;
}

.gird2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.gird3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  align-items: center;
}

.item-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  > div {
    margin-right: 10px;
  }
}

.specItem {
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-gap: 10px;

  .name {
    text-align: right;
  }
}

.content {
  img {
    max-width: 100%;
  }
}
</style>
